import React from 'react'
import { lazy, Suspense } from 'react'
import '../assets/css/index.css'
import img1 from '../assets/images/mall.png'
import img2 from '../assets/images/sort.png'
import img3 from '../assets/images/cart.png'
import img4 from '../assets/images/user.png'
import { Switch, Route, Redirect, NavLink } from 'react-router-dom'
const Mall = lazy(() => import('../views/mall'))
const Cate = lazy(() => import('../views/cate'))
const Cart = lazy(() => import('../views/cart'))
const User = lazy(() => import('../views/user'))
class Home extends React.Component {

    change() {
        this.className = 'active'
    }
    render() {
        return (<div>
            <Suspense fallback={<div>加载中~~~</div>}>
                <Switch>
                    <Route path='/index/mall' component={Mall}></Route>
                    <Route path='/index/cate' component={Cate}></Route>
                    <Route path='/index/cart' component={Cart}></Route>
                    <Route path='/index/user' component={User}></Route>
                    <Redirect to='/index/mall'></Redirect>
                </Switch>
            </Suspense>
            <div className='tabbar'>
                <NavLink onClick={() => this.change()} className='aa' to='/index/mall'>
                    <img src={img1} alt="" />
                    <p>商城</p>
                </NavLink>
                <NavLink className='aa' to='/index/cate'>
                    <img src={img2} alt="" />
                    <p>分类</p>
                </NavLink>
                <NavLink className='aa' to='/index/cart'>
                    <img src={img3} alt="" />
                    <p>购物车</p>
                </NavLink>
                <NavLink className='aa' to='/index/user'>
                    <img src={img4} alt="" />
                    <p>我</p>
                </NavLink>
            </div>


        </div>)
    }
}
export default Home